/* CSS STYLING */

        /* De basis: we gebruiken een systeemlettertype voor die 80s/90s look */
     

     
        body {

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;            
            font-size: 10pt; 
            line-height: 1.4;
            color: #000;
            background-color: #ffffff;
            margin: 40px; /* Ruime marges rondom de pagina */
            -webkit-font-smoothing: grayscale;
        }
        
 .background {
           /* Zorg dat de div de hele pagina vult */
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
    
           background-image: url('citrus-achtergrond.jpg');
           background-size: cover;      /* Zorgt dat de foto vult zonder vervormen */
           background-position: center; /* Centreert de foto */
           background-repeat: no-repeat;
           opacity: 0.27; 
           z-index: -1; 
}       

        /* Header met naam en titel */
        header {
            margin-bottom: 80px;
        }

        .name {
            font-weight: bold;
            display: block;
        }

        .top-bar {
            display: flex;
            justify-content: space-between; /* Duwt de elementen uit elkaar */
            align-items: center;           /* Zorgt dat ze verticaal netjes uitgelijnd zijn */
            padding: 10px 20px;            /* Geeft wat ademruimte aan de zijkanten */
        }

        .home-link {
            text-decoration: none;
            color: blue;
            font-weight: bold;
        }

        /* De layout: een grid met 4 kolommen voor de secties */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 gelijke kolommen */
            gap: 20px;
            align-items: start;
        }

        /* Kopjes boven de kolommen */
        h2 {
            font-size: 16pt;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 0;
        }

        /* Lijstinstellingen */
        ul {
            list-style-type: none; /* Geen bolletjes voor de lijst */
            padding: 0;
            margin: 0;
        }

        li {
            font-size: 11pt;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 0;        
        }

        .container {
             display: flex;       /* Zet elementen naast elkaar */
             align-items: start;  /* Zorgt dat de tekst bovenaan begint */
             gap: 20px;           /* Ruimte tussen de video en de tekst */
        }

        .tekst-vak {
             max-width: 300px;    /* Houdt het vakje compact/contained */
            line-height: 1.6;    /* Maakt de tekst beter leesbaar */
            /* Geen border nodig, de beperkte breedte doet het werk */
        }

        /* De links: standaard zwart, onderstreping alleen bij hover */
        a {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            text-decoration:underline;
        }

        /* Subtekst of details (zoals jaartallen of prijzen) */
        .detail {
            color: #666;
            margin-left: 5px;
        }

       footer {
    /* Positionering: Strak tegen de onderkant over de hele breedte */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* De Glossy Basis (Web 2.0 Blauw) */
    background-color: #828282; 
    background-image: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(0, 0, 0, 0) 50.1%, 
        rgba(0, 0, 0, 0.1) 100%
    );

    /* Styling */
    padding: 0px 0;
    text-align: center;
    color: white;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);

    /* Animatie voorbereiding: vertel CSS dat de verandering 0.3 seconden mag duren */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* De Hover Animatie */
footer:hover {
    /* Maakt de footer lichter (als een felle glans) */
    background-color: #ffffff; 
    
    /* Vergroot de schaduw en de 'glow' aan de bovenkant */
    box-shadow: 0 -8px 20px rgba(255, 255, 255, 0.5);
    
    /* Schuift de footer heel subtiel een klein stukje omhoog voor interactie */
    transform: translateY(-2px);
}

/* Belangrijk: Geef de body wat extra ruimte aan de onderkant, 
   zodat de footer je gewone tekst niet overlapt aan het einde van de pagina */
body {
  margin-bottom: 70px; 
}

        /* Mobiele weergave: stapel de kolommen onder elkaar op kleine schermen */
        @media (max-width: 800px) {
            .grid-container {
                grid-template-columns: 1fr 1fr; /* 2 kolommen op tablets */
            }
        }

        @media (max-width: 500px) {
            .grid-container {
                grid-template-columns: 1fr; /* 1 kolom op telefoons */
            }
        }